<!-- 图标 -->
<div class="col-md-2">
	<p v-if="data.status == 'waiting'">
		<span class="glyphicon glyphicon-pause" style="font-size: 50px"></span>
	</p>
	<p v-else-if="data.status == 'ready'">
		<span class="glyphicon glyphicon-refresh" style="font-size: 50px"></span>
	</p>
	<p v-else-if="data.status == 'playing'">
		<span class="glyphicon glyphicon-play" style="font-size: 50px"></span>
	</p>
	<p v-else>
		<span class="glyphicon glyphicon-search" style="font-size: 50px"></span>
	</p>
</div>

<div class="col-md-10">
	<div class="jumbotron">
		<p>屏幕：{{sid}}</p>
		<p v-if="data.status == 'waiting'">等待中</p>
		<p v-else-if="data.status == 'ready'">准备中</p>
		<p v-else-if="data.status == 'playing'">播放中</p>
		<p v-else>未知状态</p>
		<p v-if="data.connect == false"><small><em>离线状态</em></small></p>
	</div>
</div>

<div class="col-md-10">
	<!-- 表格 -->
	<div class="table-responsive">
		<table class="table table-striped table-bordered">
			<tbody v-if="data.status == 'waiting'">
				<tr v-if="data.pid != null">
					<td>已播放完毕</td>
					<td>#{{data.pid}} {{data.pname}}</td>
				</tr>
			</tbody>
			<tbody v-else-if="data.status == 'ready'">
				<tr>
					<td>即将播放</td>
					<td>#{{data.pid}} {{data.pname}}</td>
				</tr>
			</tbody>
			<tbody v-else-if="data.status == 'playing'">
				<tr>
					<td>播放的工程</td>
					<td>#{{data.pid}} {{data.pname}}</td>
				</tr>
				<tr>
					<td>模块序号</td>
					<td>{{data.moduleIndex+1}} / {{data.moduleLength}}</td>
				</tr>
				<tr>
					<td>模块名称</td>
					<td>{{data.moduleName}}</td>
				</tr>
				<tr>
					<td>当前场景</td>
					<td v-if="data.sceneLength != null">{{data.sceneIndex+1}} / {{data.sceneLength}}</td>
					<td v-else>{{data.sceneIndex+1}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>